<template>
	<view class="app-classify-page-two-goods-list">
		<view class="app-classify-page-two-goods-list__body bg-white">
			<scroll-view scroll-x class="e-m-b-30 white-nowrap" v-show="!hasLoading">
				<view class="e-flex">
					<view
						class="app-classify-page-two-goods-list__classify e-m-r-20"
						:class="[classifyIndex === index && 'is-active']"
						:style="[classifyIndex === index && classifyBg]"
						@tap="classifyIndex = index"
						v-for="(item, index) in twoClassifyList"
						:key="item.id"
					>
						<text class="fw-600 white-nowrap">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
			<view class="app-classify-page-two-goods-list__body-scroll-view">
				<view class="app-classify-page-two-goods-list__skeleton" v-if="hasLoading">
					<e-skeleton :show="true" :fixed="false">
						<view class="e-flex e-flex-items-start e-m-b-20" v-for="item in 8">
							<e-skeleton-item variant="block">
								<view class="app-classify-page-two-goods-list__skeleton-img"></view>
							</e-skeleton-item>
							<view class="e-flex-1 e-m-l-30">
								<e-skeleton-item variant="block">
									<view class="app-classify-page-two-goods-list__skeleton-box1"></view>
								</e-skeleton-item>
								<view class="e-p-t-20 e-flex">
									<e-skeleton-item variant="block">
										<view class="app-classify-page-two-goods-list__skeleton-box2"></view>
									</e-skeleton-item>
								</view>
								<view class="e-p-t-20 e-flex">
									<e-skeleton-item variant="block">
										<view class="app-classify-page-two-goods-list__skeleton-box3"></view>
									</e-skeleton-item>
								</view>
							</view>
						</view>
					</e-skeleton>
				</view>
				<e-scroll-view
					ref="scrollViewRef"
					height="100%"
					width="100%"
					lower-threshold="100"
					refresherRefreshingImg=" "
					refresherRefreshingText=" "
					:refresherDefaultText="$t('tabbar.classifyRefresherTxt1')"
					:refresherPullingText="$t('tabbar.classifyRefresherTxt2')"
					refresherTitleStyle="font-size:24rpx"
					:refresherDefaultImg="$staticPath('arrow-up-double.png')"
					:watchTouchmove="watchTouchmove"
					:refresher-enabled="!(!refresherEnabled&&classifyIndex === 0)"
					unit="rpx"
					@refresh="handlePullDownRefresh"
					@scrolltolower="handleQueryPage()"
					@scroll="handleScroll"
					@touchstart="handleTouchstart"
					@touchmove="handleTouchmove"
					@touchend="handleTouchend"
					v-else
				>
					<view class="app-classify-page-two-goods-list__body-list ">
						<view v-for="(item, index) in goodsList" :key="item.id">
							<e-line v-if="index !== 0"></e-line>
							<ClassifyGoodsItem :info="item" />
						</view>
					</view>
					<view class="e-p-b-30">
						<load-more v-if="!isEmpty" :showLoad="showLoad">
							<view class="e-flex-xy-center" v-if="nextText">
								<view class="app-classify-page-two-goods-list__icon" :class="[hasNext && 'is-active']">
									<app-image src="arrow-up-double.png" size="34rpx"></app-image>
								</view>
								<text class="e-font-24 c-secondary e-p-l-20">{{ $t(nextText) }}</text>
							</view>
						</load-more>
					</view>
				</e-scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch, computed,nextTick,onMounted } from 'vue';
import { getGoodsClassifyTwo, getStoreGrouping, getGoodsList } from '@/common/request/api';
import type { ClassifyItem } from '@/common/request/api';
import type { PickPromise } from '@/typings';
import { useCurrentInstance,useQueryPage } from '@/common/hooks';
import { useInit } from '@/common/stores';
import { storeToRefs } from 'pinia';
import { useScrollView } from '../hooks/useScrollView';
import { getRect } from '@/common/utils';
import ClassifyGoodsItem from '../goods-item.vue'

const props = defineProps<{
	classifyId: number;
	refresherEnabled: boolean
}>();

const emit = defineEmits(['prev','next']);

const ctx = useCurrentInstance();

const classifyListMap = ref<Map<number, ClassifyItem[]>>(new Map([]));
const twoClassifyList = ref<ClassifyItem[]>([]);

const classifyIndex = ref(0);

const { AppSkin } = storeToRefs(useInit());
const classifyBg = computed(() => {
	return {
		background: AppSkin.value.primary.replace('1)', '.05)')
	};
});

const getClassifyChild = async (id: number | string) => {
	let res: PickPromise<ReturnType<typeof getGoodsClassifyTwo>>;
	// #ifndef PRIVATE
	res = await getGoodsClassifyTwo(id);
	// #endif
	// #ifdef PRIVATE
	res = await getStoreGrouping({
		storeId: uni.getStorageSync('storeId'),
		pid: id
	});
	// #endif
	return res.data;
};

const requestParams = computed(() => {
	const value = props.classifyId;
	return {
		// #ifndef PRIVATE
		categoryId: value,
		// #endif
		// #ifdef PRIVATE
		groupingId: value
		// #endif
	};
});

const {
	showLoad,
	isGet,
	isEmpty,
	list: goodsList,
	handleQueryPage,
	handleRefresh
} = useQueryPage({
	api: getGoodsList,
	option: {
		params: requestParams
	}
});

const { scrollViewRef, handlePullDownRefresh, watchTouchmove, hasNext, hasFullPage, nextText, scrollHeight,handleScroll, handleTouchstart, handleTouchmove, handleTouchend, hasLoading } =
	useScrollView(isGet, () => {
		if(classifyIndex.value > 0){
			classifyIndex.value--
		}else{
			emit('prev')
		}
	},
	() => {
		if(classifyIndex.value < (twoClassifyList.value.length - 1)){
			classifyIndex.value++
		}else{
			emit('next')
		}
	});


watch(
	() => props.classifyId,
	(v) => {
		// if (classifyListMap.value.has(v)) {
		// 	twoClassifyList.value = classifyListMap.value.get(v)!;
		// } else {
		// 	hasLoading.value = true;
		// 	getClassifyChild(v)
		// 		.then(async (res) => {
		// 			twoClassifyList.value = res;
		// 			classifyIndex.value = 0
		// 		})
		// 		.catch(() => {
		// 			hasLoading.value = false;
		// 		});
		// }
	}
);
watch(requestParams, () => {
	watchTouchmove.value = false;
	hasLoading.value = true;
	hasFullPage.value = true;
	handleRefresh().finally(() => {
		hasLoading.value = false;
		nextTick(async () => {
			if (!isGet.value) {
				if(!scrollHeight.value){
					const boxSize = await getRect(ctx, '.app-classify-page-two-goods-list__body-scroll-view')
					scrollHeight.value = boxSize.height!
				}
				getRect(ctx, '.app-classify-page-two-goods-list__body-list').then((size) => {
					if (size.height! < scrollHeight.value) {
						hasFullPage.value = false;
					}
				});
			}
		})
	});
});

onMounted(() => {
	getRect(ctx, '.app-classify-page-two-goods-list__body-scroll-view').then((size) => {
		scrollHeight.value = size.height!
	});
})
</script>

<style lang="scss" scoped>
@include appBem_b(classify-page-two-goods-list) {
	height: 100%;
	overflow: hidden;
	padding-top: 20rpx;

	@include appBem_e(body) {
		height: 100%;
		padding: 30rpx 0 0 30rpx;
		border-radius: 20rpx 20rpx 0 0;
		border-radius: 20rpx 20rpx 0 0;
		&-scroll-view{
			height: calc(100% - 80rpx);
		}
	}
	@include appBem_e(classify) {
		padding: 0 20rpx;
		height: 50rpx;
		background: #f0f0f0;
		border-radius: 24rpx;
		border: 2rpx solid #f0f0f0;
		@include appWhen(active) {
			border-color: var(--color-primary);
			color: var(--color-primary);
		}
	}
	@include appBem_e(skeleton) {
		height: 100%;
		overflow: hidden;
		&-img {
			width: 168rpx;
			height: 168rpx;
		}
		&-box1 {
			height: 30rpx;
		}
		&-box2 {
			width: 300rpx;
			height: 30rpx;
		}
		&-box3 {
			width: 180rpx;
			height: 30rpx;
		}
	}
	@include appBem_e(icon) {
		transition-duration: 0.2s;
		transition-property: transform;
		transform: rotate(0deg);
		@include appWhen(active) {
			transform: rotate(180deg);
		}
	}
}
</style>
